<template>
	<view>
    <view class="content">
      <view class="filter-btn" >
        <view class="filter-btn-item" @tap="change(2)" :class="{'filter-btn-active':btnnum == 2}">全部</view>
        <view class="filter-btn-item" @tap="change(0)" :class="{'filter-btn-active':btnnum == 0}">健康</view>
        <view class="filter-btn-item" @tap="change(1)" :class="{'filter-btn-active':btnnum == 1}">异常</view>
      </view>
      <view class="record-main" ref="dataList">
        <view class="record" v-for="(item,index) in recordList" :key="index" @click="toInfoDetail(item)">
          <view class="record-item health-status">
            <view class="record-item-name" >{{item.name}}</view>
            <view class="record-item-status" :class="[item.abnormalSymptoms === 1 ?'record-item-error':'']">{{item.abnormalSymptoms === 0 ? '健康' : '异常'}}</view>
          </view>
          <view class="record-item">
            <view class="record-item-title" >证件号码</view>
            <view class="record-item-value" >{{item.identity}}</view>
          </view>
          <view class="record-item">
            <view class="record-item-title" >提交时间</view>
            <view class="record-item-value" >{{item.reportTime}}</view>
          </view>
        </view>
        <view class="no-more" v-if="finished">已加载全部</view>
      </view>
      <view class="report-bottom" @click="addItem">
        <view class="report-bottom-btn">
          <image class="report-bottom-btn-img"  src="https://szgd-dev.tgovcloud.com/public/images/icon-add.png" mode="widthFix"></image>
          添加
        </view>
      </view>
    </view>
	</view>
</template>

<script>
import { getReportList } from "@/api";
export default {
  data() {
    return {
      recordList:[],
      btnnum: 2,
      total: 0,
      pageNum: 1,
      size: 10,
      abnormalSymptoms: '',
      flag: false,
      finished: false,
    }
  },
  onLoad() {
    console.log('onLoad====3333=');
    this.getDataList();
  },
  onReachBottom() {
    console.log('onReachBottom====');
    if (this.recordList.length < this.total) {
      this.pageNum++;
      this.getDataList();
    } else {
      this.finished = true;
    }
  },
  // onPageScroll : function(e) {
  //   //nvue暂不支持滚动监听，可用bindingx代替
  //   // console.log("滚动距离为：" + e.scrollTop);
  // },
  methods: {
    change(e) {
      this.recordList = [];
      this.finished = false;
      this.btnnum = e;
      // this.$refs.dataList.scrollTop = 0;
      if (e === 2) {
        this.abnormalSymptoms = '';
      } else {
        this.abnormalSymptoms = e;
      }
      this.pageNum = 1;
      this.total = 0;
      this.getDataList();
    },
    addItem(){
      uni.navigateTo({
        url:'../healthReport/add'
      })
    },
    getDataList() {
      console.log('this.pageNum====', this.pageNum);
      const data = {
        pageNum: this.pageNum,
        size: this.size,
        abnormalSymptoms: this.abnormalSymptoms,
      };
      getReportList(data).then((res) => {
        console.log('res===', res);
        if(res.records) {
          this.recordList = [...this.recordList, ...res.records];
          this.total = res.total;
          if(this.recordList.length === this.total) {
            this.finished = true;
          }
        }
      });
    },
    toInfoDetail(item){
      uni.navigateTo({
        url:'../healthReport/infoDetail?item='+encodeURIComponent(JSON.stringify(item))
      })
    },
  }
}
</script>

<style lang="scss" scoped>
	.content{
		position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
		background-color: #f2f2f2;
	}
	.filter-btn{
    position: fixed;
    height: 70rpx;
    left: 0;
    right: 0;
    top: 0;
		display: flex;
		flex-wrap:wrap;
    background-color: #fff;
    padding: 0 51rpx;
    padding-top: 34rpx;
  	justify-content:space-between;
		&-item{
			flex-basis: 126rpx;
			padding-bottom: 20rpx;
			text-align: center;
		}
		&-active{
      color: #2C9AF1;
      border-bottom:3px solid #2C9AF1;
    }
	}

	.record-main{
    margin-top: 66rpx;
		padding:30rpx 32rpx;
		box-sizing: border-box;
    background-color: #f2f2f2;
    overflow-y: scroll;
    .record{
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      padding:26rpx 32rpx;
      border-radius: 10rpx;
      box-shadow: 0px 0px 10px rgba(229, 229, 229, 1);
      margin-top: 30rpx;
      box-sizing: border-box;
      &-item{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 19rpx 0;
        &-title{
          color: #999999;
          font-size: 30rpx;
        }
        &-value{
          color: #666666;
          font-size: 34rpx;
        }
        &-name{
          color: #000000;
          font-size: 36rpx;
          font-weight: bolder;
        }
        &-status{
          color: #66DD55;
          font-size: 30rpx;
          padding: 9rpx 31rpx;
          margin-left: 32rpx;
          border: 1px solid #66DD55;
        }
        &-error{
          color: #F15B53;
          border: 1px solid #F15B53;
        }
      }
      .health-status{
        justify-content: start;
      }
    }
    .no-more{
      color: #999999;
      font-size: 30rpx;
      margin: 20rpx 0;
      text-align: center;
      height: 80rpx;
      padding-bottom: 60rpx;
    }
	}

  .report-bottom{
    background-color: #f2f2f2;
		position: fixed;
    height: 94rpx;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30rpx 0 20rpx;
		font-size:36rpx;
    &-btn{
      margin: 0 auto;
      width: 686rpx;
      height: 94rpx;
      background: #2C9AF1;
      border: 1rpx solid #2C9AF1;
      border-radius: 16rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      &-img{
        width: 35rpx;
        margin-right: 8rpx;
      }
    }
  }
</style>>
